<template>
  <a-table
    :columns="columnData"
    :data-source="dataSource"
    :pagination="false"
    :scroll="{ x: 2000, y: 500 }"
    bordered
  >
    <template #summary>
      <a-table-summary-row>
        <a-table-summary-cell fixed :index="0" :col-span="4" align="center"
          >合计</a-table-summary-cell
        >
        <template v-for="(item, index) in data.total" :key="index">
          <template v-for="(num, index) in item" :key="index">
            <a-table-summary-cell v-if="!isNaN(num)" align="center">
              <a-typography-text>{{ num }}</a-typography-text>
            </a-table-summary-cell>
          </template>
        </template>
      </a-table-summary-row>
    </template>
  </a-table>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    //原始数据
    let data = {
      header: [
        {
          manufacturing_value: '02',
          manufacturing_name: '北生研',
          manufacturing_name_2: '北京北生研生物制品有限公司',
        },
        {
          manufacturing_value: '80',
          manufacturing_name: '北京科兴中维',
          manufacturing_name_2: '北京科兴中维生物技术有限公司',
        },
      ],
      list: [
        {
          VACCINATION_UNIT_3_name: '临海市',
          VACCINATION_UNIT_4_name: '桃渚镇',
          VACCINATION_UNIT_5_name: '桃渚中心卫生院',
          px: 23,
          total: {
            header: '合计',
            a: 12,
            b: 11,
            c: 0,
            total: 23,
          },
          '02': {
            header: '北京北生研生物制品有限公司',
            a: 0,
            b: 0,
            c: 0,
            total: 0,
          },
          80: {
            header: '北京科兴中维生物技术有限公司',
            a: 12,
            b: 11,
            c: 0,
            total: 23,
          },
        },
        {
          VACCINATION_UNIT_3_name: '临海市',
          VACCINATION_UNIT_4_name: '古城街道办事处',
          VACCINATION_UNIT_5_name: '台州医院新冠临时接种点',
          px: 18,
          total: {
            header: '合计',
            a: 9,
            b: 9,
            c: 0,
            total: 18,
          },
          '02': {
            header: '北京北生研生物制品有限公司',
            a: 0,
            b: 0,
            c: 0,
            total: 0,
          },
          80: {
            header: '北京科兴中维生物技术有限公司',
            a: 9,
            b: 9,
            c: 0,
            total: 18,
          },
        },
        {
          VACCINATION_UNIT_3_name: '临海市',
          VACCINATION_UNIT_4_name: '古城街道办事处',
          VACCINATION_UNIT_5_name: '古城街道社区卫生服务中心',
          px: 12,
          total: {
            header: '合计',
            a: 6,
            b: 6,
            c: 0,
            total: 12,
          },
          '02': {
            header: '北京北生研生物制品有限公司',
            a: 0,
            b: 0,
            c: 0,
            total: 0,
          },
          80: {
            header: '北京科兴中维生物技术有限公司',
            a: 6,
            b: 6,
            c: 0,
            total: 12,
          },
        },
      ],
      total: {
        total: {
          header: '合计',
          a: 36,
          b: 30,
          c: 0,
          total: 66,
        },
        '02': {
          header: '北京北生研生物制品有限公司',
          a: 2,
          b: 0,
          c: 0,
          total: 2,
        },
        80: {
          header: '北京科兴中维生物技术有限公司',
          a: 34,
          b: 30,
          c: 0,
          total: 64,
        },
      },
    }
    //表格所需数据
    let dataSource = ref([{}])
    //初始column
    let columnData = [
      //排序
      {
        title: '排序',
        dataIndex: 'indexNumber',
        width: 100,
        fixed: 'left',
        align: 'center',
      },
      //县市区
      {
        title: '县市区',
        dataIndex: 'VACCINATION_UNIT_3_name',
        width: 100,
        fixed: 'left',
        align: 'center',
      },
      //乡镇街道
      {
        title: '县市区',
        dataIndex: 'VACCINATION_UNIT_4_name',
        width: 100,
        fixed: 'left',
        align: 'center',
      },
      //接种单位
      {
        title: '接种单位',
        dataIndex: 'VACCINATION_UNIT_5_name',
        width: 300,
        fixed: 'left',
        align: 'center',
      },
      //合计
      {
        title: '合计',
        children: [
          {
            title: '第一剂次接种量(万)',
            dataIndex: ['total', 'a'],
            width: 150,
            align: 'center',
          },
          {
            title: '第二剂次接种量(万)',
            dataIndex: ['total', 'b'],
            width: 150,
            align: 'center',
          },
          {
            title: '第三剂次接种量(万)',
            dataIndex: ['total', 'c'],
            width: 150,
            align: 'center',
          },
          {
            title: '总几剂次(万)',
            dataIndex: ['total', 'total'],
            width: 100,
            align: 'center',
          },
        ],
      },
    ]
    //获取dataSource
    dataSource.value = data.list.map((item, index) => {
      return {
        ...item,
        indexNumber: index + 1,
      }
    })

    //向columnData里push header 信息，动态展示表格
    for (let i = 0; i < data.header.length; i++) {
      let tag = '02'
      console.log(data.header[i].manufacturing_name)
      if (data.header[i].manufacturing_name == '北京科兴中维') {
        tag = '80'
      } else if (data.header[i].manufacturing_name == '其他') {
        tag = '/'
      }
      columnData.push({
        title: data.header[i].manufacturing_name_2,
        children: [
          {
            title: '第一剂次接种量(万)',
            dataIndex: [tag, 'a'],
            width: 150,
            align: 'center',
          },
          {
            title: '第二剂次接种量(万)',
            dataIndex: [tag, 'b'],
            width: 150,
            align: 'center',
          },
          {
            title: '第三剂次接种量(万)',
            dataIndex: [tag, 'c'],
            width: 150,
            align: 'center',
          },
          {
            title: '总几剂次(万)',
            dataIndex: [tag, 'total'],
            width: 100,
            align: 'center',
          },
        ],
      })
    }

    return {
      columnData,
      data,
      dataSource,
    }
  },
})
</script>
<style></style>
